<template>
  <view class="main">
    <u-navbar title="请假审批" :autoBack="true"> </u-navbar>
    <view class="btn-group">
      <view class="flex-between" style="
          width: 100%;
          border-radius: 12px;
          padding: 30px 20px;
          background-color: #fff;
        ">
        <view class="u-flex u-col-center">
            <u-avatar :src="checkDetail.head"></u-avatar>
          <view class="u-m-l-20">{{ checkDetail.userName }}</view>
        </view>
        <view style="color: #c4ad8c" v-if="checkDetail.approvalStatus == '1'">退回</view>
        <view style="color: #c4ad8c" v-if="checkDetail.approvalStatus == '2'">待审核</view>
        <view style="color: #c4ad8c" v-if="checkDetail.approvalStatus == '3'">审核通过</view>
        <view style="color: #c4ad8c" v-if="checkDetail.approvalStatus == '4'">审核未通过</view>
      </view>
    </view>
    <view class="approvalInfo">
      <view>审批编号：<text style="color: #ccc">{{ checkDetail.id }}</text>
      </view>
      <view>
        提交时间：<text style="color: #ccc">{{
          checkDetail.createTime
        }}</text></view>
      <view>
        所在学院：<text style="color: #ccc">{{
          checkDetail.collegeName
        }}</text></view>
      <view v-if="checkDetail.departmentName">所在系部：
        <text style="color: #ccc">{{ checkDetail.departmentName }}</text>
      </view>
      <view>
        联系方式：<text style="color: #ccc">{{
          checkDetail.userPhone
        }}</text></view>
      <view>请假事由：<text style="color: #ccc">{{
          checkDetail.reasonName
        }}</text></view>
      <view>
        开始时间：
        <text style="color: #ccc">{{ checkDetail.leaveStartTime }}</text>
      </view>
      <view>结束时间：
        <text style="color: #ccc">{{ checkDetail.leaveEndTime }}</text>
      </view>
      <view>
        请假时长：
        <text style="color: #ccc">{{ checkDetail.leaveDays }}天</text>
      </view>
      <view>
        请假原因：
        <text style="color: #ccc">{{ checkDetail.leaveExplain }}</text>
      </view>
    </view>

    <view style="margin: 10px" v-if="type == 'check' && checkDetail.approvalStatus == '2'">
      <view style="padding: 10px 0; font-weight: bold">审核信息</view>
      <u--form :model="form" ref="uForm" labelWidth="90">
        <u-form-item label="审核状态">
          <!-- @click="typeColumnsShow = true" -->
          <!-- v-model="value" -->
          <radio-group @change="radioChange" placement="row" style="
              display: flex;
              justify-content: space-around;
              align-items: center;
            ">
            <radio activeColor="#C4AD8C" value="3" :checked="current == 3"><text style="margin-right: 20rpx">通过</text>
            </radio>
            <radio activeColor="#C4AD8C" value="4" :checked="current == 4">不通过</radio>
          </radio-group>
        </u-form-item>
        <u-form-item label="备注"> </u-form-item>
        <u--textarea v-model="reason" placeholder="请输入内容" confirmType="done"></u--textarea>
      </u--form>
      <view style="margin-top: 40px; padding-bottom: 40px">
        <u-button customStyle="background:#182044;color:#C4AD8C;" @click="submit">提交</u-button>
      </view>
    </view>

    <u-picker :show="typeColumnsShow" :columns="typeColumns" @cancel="typeColumnsShow = false" @confirm="confirm">
    </u-picker>
    <u-datetime-picker :show="beginTimePickerShow" mode="datetime" @confirm="beginTimeConfirm"
      @cancel="beginTimePickerShow = false" :formatter="formatter" :minDate="new Date().getTime()"></u-datetime-picker>

    <u-datetime-picker :show="endTimePickerShow" W mode="datetime" @confirm="endTimeConfirm"
      @cancel="endTimePickerShow = false" :formatter="formatter" :minDate="new Date().getTime()"></u-datetime-picker>
  </view>
</template>

<script>
  import {
    getTeacherleaveCheckDetail,
    checkLeave
  } from "@/api/user.js";
  export default {
    data() {
      return {
        tabIndex: 1,
        endTimePickerShow: false,
        beginTimePickerShow: false,
        typeColumnsShow: false,
        typeColumns: [
          ["通过", "不通过"]
        ],
        btnType1: "primary",
        btnType2: "",
        form: {
          beginTime: "",
          type: "",
          reason: "",
          name: "",
        },
        rules: {
          name: [{
            required: true,
            message: "请输入姓名",
            trigger: ["blur", "change"],
          }, ],
        },
        current: 3,
        type: null,
        detailId: null,
        reason: "",
        checkDetail: {},
      };
    },
    onLoad(options) {
      console.log("options", options);
      this.detailId = options.id;
      console.log("detailId", this.detailId);
      this.type = options.type;
      this.getDetail();
    },
    methods: {
      getDetail() {
        getTeacherleaveCheckDetail({
          id: this.detailId
        }).then((res) => {
          this.checkDetail = res.data;
          console.log("checkDetail", this.checkDetail);
        });
      },
      submit() {
        // id:this.detailId
        //
        checkLeave({
          id: this.detailId,
          approvalStatus: this.current,
          remark: this.reason,
        }).then((res) => {
          console.log("res", res);
          if (res.data) {
            uni.showToast({
              title: "审批成功",
              icon: "none",
            });
            this.type = "show";
            this.getDetail();
            // setTimeout(()=>{
            //   uni.navigateBack()
            // },1000)
          }
        });
      },
      radioChange(e) {
        console.log("e", e);
        this.current = e.detail.value;
      },
      formatter(type, value) {
        // console.log(type)
        if (type === "year") {
          return `${value}年`;
        }
        if (type === "month") {
          return `${value}月`;
        }
        if (type === "day") {
          return `${value}日`;
        }
        if (type === "hour") {
          return `${value}时`;
        }
        if (type === "minute") {
          return `${value}分`;
        }
        return value;
      },
      endTimeConfirm(e) {
        this.endTimePickerShow = false;
        let date = new Date(e.value);
        let year = date.getFullYear();
        let month = date.getMonth() + 1;
        if (month < 10) {
          month = "0" + month;
        }
        let day = date.getDay() + 1;
        if (date < 10) {
          date = "0" + date;
        }
        let hour = date.getHours();
        if (hour < 10) {
          hour = "0" + hour;
        }
        let mins = date.getMinutes();
        if (mins < 10) {
          mins = "0" + mins;
        }
        this.form.endTime =
          year + "-" + month + "-" + day + " " + hour + ":" + mins + ":" + "00";

        // console.log(e)
        // console.log(this.form.beginTime)
      },

      beginTimeConfirm(e) {
        this.beginTimePickerShow = false;
        let date = new Date(e.value);
        let year = date.getFullYear();
        let month = date.getMonth() + 1;
        if (month < 10) {
          month = "0" + month;
        }
        let day = date.getDay() + 1;
        if (date < 10) {
          date = "0" + date;
        }
        let hour = date.getHours();
        if (hour < 10) {
          hour = "0" + hour;
        }
        let mins = date.getMinutes();
        if (mins < 10) {
          mins = "0" + mins;
        }
        this.form.beginTime =
          year + "-" + month + "-" + day + " " + hour + ":" + mins + ":" + "00";

        console.log(e);
        console.log(this.form.beginTime);
      },
      confirm(e) {
        console.log(e);
        this.typeColumnsShow = false;
        this.form.type = e.value[0];
      },

      open(e) {
        // console.log('open', e)
      },
      close(e) {
        // console.log('close', e)
      },
      change(e) {
        // console.log('change', e)
      },
      btnClick(flag) {
        this.tabIndex = flag;
        if (flag == 1) {
          this.btnType1 = "primary";
          this.btnType2 = "default";
          return;
        }
        this.btnType1 = "default";
        this.btnType2 = "primary";
      },
    },
  };
</script>

<style lang="scss" scoped>
  .main {
    widht: 100%;
    height: 100%;
    font-family: "PingFang SC-Regular";
    background-color: #f8fafb;

    .approvalInfo {
      margin: 10px;

      border-radius: 12px;
      background-color: #fff;
      padding: 20px;

      view {
        margin: 10px;
      }
    }

    .clock-btn {
      position: absolute;
      bottom: 5%;
      left: 50%;
      transform: translateX(-50%);
    }

    .click-btn {
      width: 80px;
      height: 80px;
      border-radius: 50%;
      background: cornflowerblue;
      padding: 10px;
      line-height: 40px;
      text-align: center;
    }

    .clock {
      display: flex;
      flex-flow: wrap;

      .clock-item {
        flex: 1 0 50%;
        padding: 10px 0;
      }
    }

    .time {
      padding: 10px;
    }
  }

  .btn-group {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 64px;
    padding: 0 10px;

    .btn {
      width: 45%;
    }
  }

  /deep/ .u-reset-button::after {
    border: 1px solid #ccc;
  }

  /deep/ .u-button {
    // width: 40%;
  }

  .flex-between {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  uni-button {
    margin: 0;
  }
</style>
